//@ts-nocheck
import React, { useEffect, useRef, useState } from 'react'

import * as echarts from 'echarts'
import chinaData from './chinaMapData'
import './index.less'
const visualMapColor = [
  '#085DFF',
  '#206DFF',
  '#397DFF',
  '#528DFF',
  '#6B9EFF',
  '#83AEFF',
  '#9CBEFF',
  '#B4CEFF',
  '#CEDFFF',
  '#E6EEFF'
]

interface IProps {
  data?: any
}

const ChinaMap: React.FC<IProps> = ({ data }) => {
  const [echartsInstance, setEchartsInstance] = useState<any>(null)
  const chartWrapRef = useRef<any>(null)

  useEffect(() => {
    let mapType = 'china'
    // @ts-ignore
    echarts.registerMap(mapType, chinaData)
    let chart = echarts.init(chartWrapRef.current)
    chart.setOption({
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0
      },
      visualMap: {
        show: false,
        min: 0,
        max: 100,
        inRange: {
          color: [
            '#085DFF',
            '#206DFF',
            '#397DFF',
            '#528DFF',
            '#6B9EFF',
            '#83AEFF',
            '#9CBEFF',
            '#B4CEFF',
            '#CEDFFF',
            '#E6EEFF'
          ].reverse()
        },
        calculable: true
      },
      series: [
        {
          type: 'map',
          mapType: mapType,
          selectedMode:false,
          itemStyle: {
            // 地图线条颜色、粗细，块颜色
            normal: {
              borderColor: 'white',
              borderWidth: 0.1,
              areaColor: '#E6EEFF'
            },
            emphasis:{
              color: '#FFFFFF',
              areaColor: "#528DFF",
            }
          },
          left: 10,
          top: 10,
          bottom: 10,
          right: 10,
          emphasis: {
            label: {
              show: true
            }
          },
          data: data.map((item) => {
            return { name: item.label, value: item.code }
          })
        }
      ]
    })
    // chart.on('click', param => {
    //   if (param.data) {
    //     chinaData.forEach(item => {
    //       item.itemStyle = {
    //         normal: { areaColor: item.name == param.data.name ? '#AADDFF' : '#d2e9f9' },
    //         emphasis: { areaColor: '#c5e6fd' }
    //       };
    //       //重新setoption
    //     })
    //   }
    // })
  }, [data])

  return (
    <div className="china-map">
      <div className="chart-content" ref={chartWrapRef} />
      <div className="visual-value">
        <div className="list">
          {[...visualMapColor].map((color, colorIndex) => {
            return <div style={{ backgroundColor: color }} key={colorIndex} />
          })}
        </div>
        <p className="tip">颜色越深代表该地区人群占比越多</p>
      </div>
    </div>
  )
}
export default (ChinaMap)
